<!-- 顶部导航栏 -->
<template>
	<view>
		<block v-if="!onlyShowStatusBar">
			<view class="title-bar-appbar " :class="isFix ? '' : 'flx'"
				:style="{ 'padding-top': calculateStatusBar,left:'0',position:isFix?'fixed':'relative', background: bgColor ? bgColor : '#FFF' }">
				<view class="top-box" :style="{ 'min-height': `${height}rpx` }">
					<view class="top-module left-the">
						<!-- <u-icon name="arrow-left" size="18" :color="backIconColor" @tap="backPage"
							v-if="isBack"></u-icon> -->
							 <icon v-if="isBack" class="icon-small" type="success_no_circle" size="23" :color="backIconColor" @tap="backPage"></icon>
						<!-- <image class="nav_back" v-if="isBack" src="/static/images/nav_back.svg" mode="" @tap="backPage"></image> -->
						<slot name="left-slot"></slot>
					</view>
					<view class="top-module center-the Bold">
						<slot name="center-slot"></slot>
					</view>
					<view class="top-module right-the">
						<slot name="right-slot"></slot>
					</view>
				</view>
			</view>
			<view class="title-bar-placeholder" :style="{ height: calculateHeight }" v-if="isFix&&isShow"></view>
		</block>
		<view v-else style="width: 750rpx;" :style="{ height: calculateStatusBar }"></view>
	</view>
</template>

<script>
	/**
	 *
	 * @description 顶部导航栏
	 * slot:
	 * 		left-slot:左侧插槽
	 * 		center-solt:中间插槽
	 * 		right-solt:右侧插槽
	 * @property {String} 			bgColor				顶部导航栏颜色;默认值：#FFF
	 * @property {String, Boolean} 	isBack				是否显示返回;默认值：true
	 * @property {String, Boolean} 	isBackFunction		左侧插槽是否绑定返回事件;默认值：true
	 * @property {String, Boolean} 	isFix				是否固定在顶部，不悬浮;默认值：true
	 * @property {String} 			imgSrc				导航栏背景图;默认值：空
	 * @property {String, Boolean}  onlyShowStatusBar 	是否仅占位状态栏	默认值：false
	 * @property {Number}  			height 				状态栏高度，单位Rrpx	默认值：88
	 * @example
	 * <top-navigation :isBack="true" :bgColor="themeColors.white"><template #center-slot><view class="mine-name">信息</view></template></top-navigation>
	 *   */
	// #ifdef VUE3
	import {
		getCurrentInstance
	} from 'vue'
	
	// #endif
	export default {
		name: 'top-navigation',
		data() {
			return {};
		},
		props: {
			backIconColor: {
				type: String,
				default: '#FFF'
			},
			nextUrl: {
				type: String,
				default: '/pages/index/index?PageCur=0'
			},
			bgColor: {
				type: String,
				default: 'transparent'
			},
			isBack: {
				type: [Boolean, String],
				default: true
			},
			isBackFunction: {
				type: [Boolean, String],
				default: true
			},
			isFix: {
				type: [Boolean, String],
				default: false
			},
			isShow: {
				type: [Boolean, String],
				default: false
			},
			custom: {
				type: [Boolean, String],
				default: false
			},
			customNum: {
				default: 1
			},
			imgSrc: {
				type: String,
				default: ''
			},
			onlyShowStatusBar: {
				type: [Boolean, String],
				default: false
			},
			height: {
				type: [Number],
				default: 88
			}
		},
		created() {

		},
		computed: {
			calculateHeight() {
				const {
					globalProperties: global
				} = getCurrentInstance().appContext.config;
				console.log('global', global.statusBarHeight);
				return `calc(${global.statusBarHeight}px + ${this.height}rpx)`;
				// // #ifdef VUE2
				// return `${this.statusHeight}px + ${this.height}rpx`;
				// // #endif
			},
			calculateStatusBar() {
				const {
					globalProperties: global
				} = getCurrentInstance().appContext.config;
				console.log('global', global.statusBarHeight);
				return `${global.statusBarHeight}px`;
				// // #ifdef VUE2
				// return `${this.statusHeight}px`;
				// // #endif
			}
		},
		methods: {
			backPage() {
				if (this.custom) {
					if(this.customNum>3){
						uni.reLaunch({
							url: this.nextUrl
						})
					}
					
					return
				}
				if (!this.isBackFunction) return;
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.title-bar {
		width: 750rpx;
		height: auto;
		position: relative;
	}

	.title-bar-appbar {
		// border: 1px solid red;
		@extend .title-bar;
		z-index: 12;
	}

	.title-bar-placeholder {
		@extend .title-bar;
		z-index: 1;
	}

	.top-box {
		height: auto;
		min-height: 66rpx;
		width: 750rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: relative;

		.back-button {
			width: 36rpx;
			height: 36rpx;
			margin-right: 28rpx;
		}

		.top-module {
			min-width: 50rpx;
			width: auto;
			display: flex;
			align-items: center;
			font-size: 36rpx;
			font-weight: 500;
			.icon-small{
				transform: skew(10deg,-26deg) rotate(-244deg);
			}

			.nav_back {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.left-the {
			justify-content: flex-start;
		}

		.right-the {
			justify-content: flex-end;
		}

		.center-the {
			justify-content: center;
			font-weight: 550;
			font-size: 30rpx;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
		}
	}

	.flx {
		position: fixed;
		top: 0rpx;
	}

	.bg-img {
		width: 750rpx;
		position: absolute;
		top: 0rpx;
		// z-index: 1;
	}
</style>